@use "../../assets/scss/mixins/size" as mx;

html {
  // 设置盒模型为border-box
  box-sizing: border-box;
}
* {
  // 设置所有元素的margin和padding为0
  margin: 0;
  padding: 0;
  // 继承父元素的box-sizing
  box-sizing: inherit;
  // 设置伪元素的box-sizing
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body {
  // 设置body的overflow为hidden
  overflow: hidden;
  // 设置body的高度为100vh
  height: 100vh;
  // 设置body的背景为渐变色
  background: linear-gradient(
    180deg,
    #09283d,
    #1b415c,
    #29516c,
    #6e8ea5,
    #7cadd0,
    #7cadd0,
    #7cadd0,
    #7cadd0,
    #6e8ea5,
    #3a6583,
    #1a4461,
    #09283d
  );
  // 设置背景大小
  background-size: 2400% 2400%;
  // 设置动画
  animation: dayNight 60s ease infinite;
}

@keyframes dayNight {
  // 设置动画的关键帧
  0%,
  100% {
    // 设置背景位置
    background-position: 25% 0;
  }
  50% {
    background-position: 76% 100%;
  }
}
@keyframes road-moving {
  to {
    transform: translate(-2400px);
  }
}
@keyframes wheelsRotation {
  to {
    transform: rotate(360deg);
  }
}
@keyframes moon {
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translate(80px, -140px);
  }
}
@keyframes sun-moon {
  to {
    transform: rotate(1turn);
  }
}
@keyframes driving {
  0% {
    left: -25%;
  }
  10% {
    bottom: 0;
  }
  20% {
    transform: scale(0.5) rotateZ(-5deg);
    bottom: 5%;
  }
  25% {
    transform: scale(0.5) rotateZ(0);
  }
  40% {
    transform: scale(0.5) rotateZ(5deg);
  }
  50% {
    transform: scale(0.5) rotateZ(0);
  }
  100% {
    left: 110%;
    bottom: 10%;
    transform: scale(0.5) rotateZ(0);
  }
}

.car {
  // 设置汽车的位置
  position: absolute;
  // 设置汽车的位置
  bottom: -10%;
  // 设置汽车的大小
  @include mx.dimension(430, 300);
  // 设置汽车的比例
  transform: scale(0.5);
  animation: driving 5s infinite linear;
  // 设置汽车伪元素的样式
  @include mx.pseudo_after {
    // 设置汽车伪元素的位置
    bottom: 0;
    left: -3%;
    display: block;
    // 设置汽车伪元素的margin-top
    margin-top: 88px;
    // 设置汽车伪元素的大小
    @include mx.dimension(426, 1);
    // 设置汽车伪元素的阴影
    box-shadow: 2px -15px 25px 2px #000;
    // 设置汽车伪元素的z-index
    z-index: -1;
  }
  .bottom {
    // 设置汽车底部的样式
    .wheel {
      // 设置车轮的样式
      @include mx.circle(120, gray);
      // 设置车轮的位置
      position: absolute;
      // 设置车轮的位置
      bottom: 0;
      // 设置车轮的边框
      border: 20px solid black;
      animation: wheelsRotation 1s linear infinite;
      // 设置车轮1的样式
      &.wheel1 {
        // 设置车轮1的位置
        left: 5%;
      }
      // 设置车轮2的样式
      &.wheel2 {
        // 设置车轮2的位置
        right: 5%;
      }
      .dot {
        // 设置车轮上的点的样式
        position: absolute;
        background: #000;
      }
      .dot1,
      .dot2 {
        @include mx.dimension(10, 25);
      }
      .dot3,
      .dot4 {
        @include mx.dimension(25, 10);
      }
      .dot1 {
        top: 10%;
        left: 45%;
      }
      .dot2 {
        bottom: 10%;
        left: 45%;
      }
      .dot3 {
        top: 45%;
        left: 10%;
      }
      .dot4 {
        top: 45%;
        right: 10%;
      }
    }
    .wheel1-top,
    .wheel2-top {
      position: absolute;
      bottom: 48px;
      @include mx.dimension(106, 80);
      border-radius: 50%;
      box-shadow: 0px 13px 3px 0 rgba(240, 240, 240, 0.53);
      transform: rotateX(180deg);
      z-index: 3;
    }
    .wheel1-top {
      left: 7%;
    }
    .wheel2-top {
      right: 7%;
    }
  }
  .top1 {
    @include mx.pos_tl(0, 4%);
    @include mx.rect(250, 130, #6a1621, 25% 40% 0 0);
    max-width: 100%;
    @include mx.pseudo_after {
      bottom: -63px;
      right: -168px;
      z-index: 10;
      @include mx.rect(13, 37, #baccda, 10px);
      border: 2px solid #000;
      transform: rotate(-15deg);
      border-left-style: none;
    }
    .window {
      position: absolute;
      @include mx.rect(40%, 60%, #e2f0f6, 5px);
      border: 9px solid #bf6d7b;
      margin: 17px;
      &1 {
        left: 0;
        border-top-left-radius: 30%;
      }
      &2 {
        right: 0;
        border-top-right-radius: 50%;
      }
    }
  }
  .top2 {
    position: absolute;
    bottom: 20%;
    @include mx.rect(430, 140, #9c2535, 100px 200px 0 0);
    @include mx.pseudo_after {
      bottom: 7px;
      right: -340px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 80px solid transparent;
      border-right: 500px solid rgba(191, 188, 87, 0.7);
      z-index: -1;
      -webkit-mask-box-image: linear-gradient(to right, black, transparent);
      transform: rotate(-9deg);
    }
    .door {
      @include mx.pos_tl(16px, 36%);
      @include mx.rect(110, 100, null, 10% 40% 10% 10%);
      border: 3px solid #b57a84;
      .knob {
        @include mx.pos_tl(5%, 20%);
        @include mx.rect(30, 14, #e8e6e6, 30%);
        border: 1px solid lightcoral;
      }
    }
  }
}

.road {
  position: absolute;
  bottom: 0;
  @include mx.rect(250%, 200px, #585858);
  border-top: 10px solid #756d6d;
  border-bottom: 20px solid #756d6d;
  margin-left: -10px;
  @include mx.pseudo_before {
    z-index: 0;
    top: -17px;
    left: 0;
    right: 0;
    border: 5px solid #000;
  }
  .road-top-half {
    @include mx.pos_tl(30px, -10%);
    @include mx.dimension(250%, 15px);
    border-top: 40px dashed white;
    margin-top: 25px;
    transition: all 3s linear;
    animation: road-moving 10s infinite linear;
  }
}

.skyline {
  @include mx.pos_bl(205px, 110%);
  width: 100%;
  transition: all 8s linear;
  animation: road-moving 10s infinite linear;
  .building1 {
    position: relative;
    @include mx.rect(220, 450, #211919);
    &-shadow {
      position: absolute;
      left: -199px;
      @include mx.dimension(200, 450);
      border-top: 15px solid transparent;
      border-right: 60px solid rgb(44, 37, 37);
      border-bottom: 15px solid #000;
      border-left: 15px solid transparent;
    }
    .half {
      position: absolute;
      top: 10px;
      @include mx.dimension(50, 300);
      margin-top: 25px;
      border-left: 16px solid #a9d2c7;
      border-right: 16px dashed rgba(255, 255, 0, 0.19);
      &.left {
        left: 10px;
        padding: 25px;
      }
      &.right {
        right: 10px;
        padding: 20px;
      }
    }
  }
}

.moon {
  @include mx.pos_tr(30px, 370px);
  @include mx.circle(100, rgb(207, 207, 212));
  margin: auto;
  box-shadow: 0 0 60px gold, 0 0 100px rgb(185, 160, 24),
    inset 0 5px 12px 26px #f5f5f5, inset -2px 8px 15px 36px #e6e6e6;
  transition: 1s;
  transform-origin: 50% 500px;
  animation: sun-moon 40s 2s linear infinite;
}
